<template>
  <van-form label-width="80px" @submit="onSubmit">
    <van-field
      v-model="formData.email"
      label="用户名"
      name="用户名"
      placeholder="请输入要注册的邮箱账号"
      clearable
      center
      :rules="[{ required: true, message: '请填写邮箱账号' }]"
    >
      <template #button>
        <van-button :disabled="formData.disabled" size="small" type="primary" @click="sendYzm">{{ formData.yzTime }}</van-button>
      </template>
    </van-field>
    <van-field
      v-model="formData.password"
      :type="newPassword"
      name="新密码"
      label="新密码"
      placeholder="会员新密码"
      :rules="[{ required: true, message: '请填写会员新密码' }]"
    >
      <template #button>
        <van-icon
          name="eye-o"
          @click="
            newPassword === 'password'
              ? (newPassword = 'text')
              : (newPassword = 'password')
          "
        />
      </template>
    </van-field>
    <van-field
      v-model="formData.verNewPassword"
      :type="verNewPassword"
      name="验证新密码"
      label="验证新密码"
      placeholder="会员验证新密码"
      :rules="[{ required: true, message: '请验证会员新密码' }]"
    >
      <template #button>
        <van-icon
          name="eye-o"
          @click="
            verNewPassword === 'password'
              ? (verNewPassword = 'text')
              : (verNewPassword = 'password')
          "
        />
      </template>
    </van-field>

    <van-field
      v-model="formData.yzm"
      name="验证码"
      label="验证码"
      placeholder="验证码"
      :rules="[{ required: true, message: '请填写验证码' }]"
    />
    <div style="margin: 20px 10px">
      <van-button round block type="info" native-type="submit">确定</van-button>
    </div>
  </van-form>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      formData: {
        email: '407126588@qq.com',
        code: '',
        password: '',
        verNewPassword: '',
        disabled: false,
        yzTime: '发送验证码',
        yzm: ''
      },
      newPassword: 'password',
      verNewPassword: 'password'
    }
  },
  methods: {
    sendYzm() {
      this.formData.disabled = true
      const pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
      if (!pattern.test(this.formData.email)) {
        this.$message({
          message: '请输入正确的邮箱地址！',
          type: 'warning'
        })
        this.formData.disabled = false
        return
      }
      const data = this.formData.email
      this.yzm({ email: data })
        .then(res => {
          if (res.data.ok) {
            alert('邮箱验证码发送成功！')
            this.formData.yzTime = 60
            const time = setInterval(() => {
              if (this.formData.yzTime === 0) {
                this.formData.yzTime = '发送验证码'
                this.formData.disabled = false
                clearInterval(time)
              } else {
                this.formData.yzTime = this.formData.yzTime - 1
              }
            }, 1000)
          } else {
            alert('邮箱验证码发送失败，请检查邮箱是否填写正确。')
            this.formData.disabled = false
          }
        })
        .catch(err => {
          alert('请求的数据错误：' + err)
          this.formData.disabled = false
        })
    },
    onSubmit() {
      const formData = this.formData
      if (formData.password === formData.verNewPassword) {
        this.find(this.formData).then(res => {
          console.log(res)
          if (res.data.ok === 1) {
            this.$toast.success(res.data.data)
            this.$emit('goto')
          } else {
            this.$toast.fail(res.data.data)
          }
        })
      } else {
        this.$toast.fail('验证新密码失败')
      }
    },
    ...mapActions(['yzm', 'find'])
  }
}
</script>

<style>
</style>
